<template>
  <div>
    <div class="block">
      <span class="demonstration">开始时间</span>
      <el-date-picker
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          v-model="startTime"
          type="date"
          placeholder="选择日期">
      </el-date-picker>
    </div>
    <div class="block">
      <span class="demonstration">结束时间</span>
      <el-date-picker
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          v-model="overTime"
          type="date"
          placeholder="选择日期">
      </el-date-picker>
    </div>
    <el-button type="primary" @click="jump">查询历史</el-button>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          prop="employeetype"
          label="人才类型"
          :formatter="talentOption"
          width="180">
      </el-table-column>
      <el-table-column
          prop="satisfy"
          label="满足率"
          width="180">
      </el-table-column>
      <el-table-column
          prop="changereason"
          label="变动原因">
      </el-table-column>
      <el-table-column
          prop="state"
          :formatter="stateOption"
          label="审批状态">
      </el-table-column>
      <el-table-column
          prop="comparison"
          :formatter="shujubianhua"
          label="数据变化">
      </el-table-column>
      <el-table-column
          prop="creatdate"
          label="创建时间">
      </el-table-column>
    </el-table>
    <br>
    <el-table
        :data="tableData02"
        border
        style="width: 100%">
      <el-table-column
          prop="employeetype"
          label="人才类型"
          :formatter="talentOption"
          width="180">
      </el-table-column>
      <el-table-column
          prop="need"
          label="急需人才类型"
          :formatter="talentOption"
          width="180">
      </el-table-column>
      <el-table-column
          prop="quantity"
          label="急需人才数量"
          width="180">
      </el-table-column>
      <el-table-column
          prop="state"
          :formatter="stateOption"
          label="审批状态">
      </el-table-column>
      <el-table-column
          prop="creatdate"
          label="创建时间">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "TalentHistory",
  data() {
    return {
      tableData: [],
      tableData02: [],
      startTime: '',
      overTime: '',
    };
  },
  methods:{
    jump(){
      console.log(this.startTime)
      console.log(this.overTime)
      const _this = this;
      axios.get('http://localhost:8081/talent/date?startDate='+_this.startTime+'&lastDate='+_this.overTime).then(function (resp){
        console.log(resp.data)
        _this.tableData = resp.data
      })
      axios.get('http://localhost:8081/talent/date02?startDate='+_this.startTime+'&lastDate='+_this.overTime).then(function (resp){
        console.log(resp.data)
        _this.tableData02 = resp.data
      })
    },
    talentOption(row, column, cellValue){
      if (cellValue == "1"){
        return '普通工人'
      }
      if (cellValue == "2"){
        return '技术人才'
      }
      if (cellValue == "3"){
        return '高端人才'
      }
      if (cellValue == "4"){
        return '急需人才'
      }
    },
    stateOption(row, column, cellValue){
      if (cellValue == "1"){
        return '待审批'
      }
      if (cellValue == "2"){
        return '通过'
      }
      if (cellValue == "3"){
        return '未通过'
      }
    },
    shujubianhua(row, column, cellValue){
      if (cellValue == "1"){
        return '上升'
      }
      if (cellValue == "2"){
        return '下降'
      }
      if (cellValue == "3"){
        return '不变'
      }
    }
  }
}
</script>

<style scoped>

</style>